<template>
	<view class="default-content">
		<view v-if="info.img"><image style="width: 100%;height: auto;" :src="info.img" mode="widthFix"></image></view>
		<view class="content">
			<uni-title type="h3" :title="info.title"></uni-title>
			<view class="fz07rem mt10">{{info.create_time}}　|　{{info.click_um}}人观看</view>
		</view>
		<view class="view-line"></view>
		<view class="content">
			<view v-html="info.content"></view>
		</view>
		<view>
			<image class="mt15" @click="onLink('/pages/advertisement/advertisement',item.id)" v-for="item in activity" :key="item.id" style="width: 100%;z-index: 0;" :src="item.banner" mode="widthFix"></image>
		</view>
		<uni-section title="推荐阅读" type="line" padding>
			<view class="line-clamp1 mt8" v-for="item in recommend" :key="item.id"><text @click="onLink('/pages/index/info/index',item.id)" style="text-decoration: underline;color: #666;">{{item.title}}</text></view>
		</uni-section>
		<uni-section id="comments" :title="'共'+info.comments_count+'条评论'" type="line" padding>
			<uni-list>
				<uni-list-item v-for="item in info.comments" :key="item.id" :title="item.user.name" :note="item.content" :thumb="item.user.head_img" thumb-size="lg">
					<template v-slot:footer>
						<view class="text-right"><uni-icons :color="item.is_like == 1 ? '#d81e06' : ''" @click="oncommentLike(item.id)" type="hand-up" size="20"></uni-icons>{{item.likes}}</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-section>
		<view class="fixed-bottom" :style="{bottom:KeyboardHeight+'rpx'}">
			<uni-goods-nav v-show="!showcomment" :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick" @buttonClick="buttonClick" />
			<view v-show="showcomment" class="comment text-center">
				<uni-easyinput type="textarea" v-model="commentForm.content" placeholder="说点什么" />
				<button class="mt15 mr15 default-button" type="primary" size="mini" @click="onSavecomment">提交</button>
				<button class="mt15 ml15" size="mini" @click="onClearcomment">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
					icon: 'hand-up',
					text: '点赞',
					info:0,
					infoColor: "#333",
					infoBackgroundColor: '#EEE',
					type:'like',
				}, {
					icon: 'star',
					text: '收藏',
					info:0,
					infoColor: "#333",
					infoBackgroundColor: '#EEE',
					type:'collect'
				}, {
					icon: 'chat',
					text: '评论',
					info:0,
					infoColor: "#333",
					infoBackgroundColor: '#EEE',
					type:'comment'
				}],
				customButtonGroup: [{ icon: 'shop',text: '说点什么', backgroundColor: '#FFD101', color: '#333' }],
				id:0,
				form:{page:1},
				info:{img:'',title:'',create_time:'',click_um:0,content:''},
				recommend:[],
				activity:[],
				showcomment:false,
				commentForm:{id:0,content:''},
				scrollIntoViewId: '',
				KeyboardHeight:0,
				
				shareinfo:{title:'',img:'',path:''}
			}
		},
		onLoad(options){
			this.id = options.id
			this.onGetInfo()
			this.onGetActivity()
			uni.onKeyboardHeightChange(res => {
				this.KeyboardHeight = this.rpxTopx(res.height-170)
				if(this.KeyboardHeight<0)this.KeyboardHeight = 0;
			})
		},
		methods: {
			rpxTopx(px){
				let deviceWidth = wx.getSystemInfoSync().windowWidth
				let rpx = ( 750 / deviceWidth ) * Number(px)
				return Math.floor(rpx)
			},
			onGetInfo(){
				let _this = this
				this.$request_api('applet_api/wiki/'+_this.id,'GET').then(res => {
					res.data.content = _this.$func.onImgStyle(res.data.content);
					_this.info = res.data
					_this.options[0].info = _this.info.likes_count
					_this.options[1].info = _this.info.collections_count
					_this.options[2].info = _this.info.comments_count
					
					_this.shareinfo.title = _this.info.title
					_this.shareinfo.img = _this.info.img
					
					_this.info.comments.forEach((e) => {
						e.likes = e.likes.length
					})
					_this.info.comments_count = res.data.comments.length
					_this.onGetRecommend()
				}).catch(err => {
					console.log(err)
				})
			},
			onGetRecommend(){
				let _this = this
				this.$request('/api2/wiki_search','POST',{page: 1,title: _this.info.title}).then(res => {
					_this.recommend = res.data.list
				}).catch(err => {
					console.log(err)
				})
			},
			onGetActivity(){
				let _this = this
				this.$request_api('applet_api/activity','GET').then(res => {
					_this.activity = res.data
				}).catch(err => {
					console.log(err)
				})
				
			},
			onLike(){
				let _this = this
				this.$request_api('applet_api/wiki/like','POST',{id:_this.id}).then(res => {
					if(res.code == 200){
						_this.onGetInfo()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onCollect(){
				let _this = this
				this.$request_api('applet_api/wiki/collection','POST',{id:_this.id}).then(res => {
					if(res.code == 200){
						_this.onGetInfo()
						let uni_icons = document.getElementsByClassName('uni-icons')
						uni_icons[1].style.color = 'red'
						let text = document.getElementsByClassName('uni-tab__text')
						text[1].style.color = 'red'
					}
				}).catch(err => {
					console.log(err)
				})
			},
			oncomment(){
				//滚动到底部
				var query = uni.createSelectorQuery().in(this);
				query.select('.default-content').boundingClientRect(data => {
					if (data) {
						console.log('元素的高度:', data.height);
						uni.pageScrollTo({
							scrollTop: data.height,
							duration: 500,
							selector: '#comment' //指定位置
						});
					}
				}).exec(); // 执行查询
				
			},
			onSavecomment(){
				if(!this.commentForm.content){
					uni.showToast({title: '请输入内容',icon: 'error',duration: 2000})
					return;
				}
				let _this = this
				this.commentForm.id = _this.id
				this.$request_api('applet_api/wiki/comment','POST',this.commentForm).then(res => {
					if(res.code == 200){
						_this.showcomment = false
						_this.onGetInfo()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onClearcomment(){
				this.showcomment = false
			},
			oncommentLike(id){
				let _this = this
				this.$request_api('applet_api/wiki/comment/like','POST',{id:id}).then(res => {
					if(res.code == 200){
						_this.onGetInfo()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onClick(e) {
				if(e.content.type == 'like'){
					this.onLike()
				}
				if(e.content.type == 'collect'){
					this.onCollect()
				}
				if(e.content.type == 'comment'){
					this.oncomment()
				}
			},
			buttonClick(e) {
				if(e.index == 0){
					this.showcomment = !this.showcomment
				}
			},
			onLink(url,id){
				uni.navigateTo({
					url: url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.content{padding: 15px 15px 15px 15px;}
.comment{padding: 8px;background-color: #FFF;}
</style>
